<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{T2001}"></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="text/css" http-equiv="Content-Style-Type" />
    <meta content="text/javascript" http-equiv="Content-Script-Type" />
    <link href="css/ui.tabs.css" media="print, projection, screen" rel="stylesheet" type="text/css" />
    <link href="css/common.css" media="print, projection, screen" rel="stylesheet" type="text/css" />
    <style media="screen, projection" type="text/css">
        /* Not requiblue for Tabs, just to make this demo look better... */
        body, h1, h2 {
            font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
        }
        h1 {
            margin: 1em 0 1.5em;
            font-size: 18px;
        }
        h2 {
            margin: 2em 0 1.5em;
            font-size: 16px;
        }
        p {
            margin: 0;
        }
        pre, pre+p, p+p {
            margin: 1em 0 0;
        }
        code {
            font-family: "Courier New", Courier, monospace;
        }
        #Layer1 {
            position:absolute;
            width:238px;
            height:128px;
            z-index:1;
            left: 756px;
            top: 510px;
        }
    </style>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/wdatepicker/WdatePicker.js" type="text/javascript"></script>
    <script src="js/echarts/echarts.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            $(".btn").on("click", function(){
                $.get("kado02.action", $("#form1").serialize(), function(data){

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '世界人口总量',
                            subtext: '数据来自网络'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['预定', '实际']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            // interval: 24*3600 *,
                            axisLabel: {
                                formatter: function(value, index) {
                                    let date = new Date(value);
                                    let year = date.getFullYear();
                                    let month = date.getMonth() + 1;
                                    return year + '/' + month;
                                }
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: data.data.yAxis
                        },
                        series: [
                            {
                                name: '实际',
                                type: 'bar',
                                data: data.data.series1
                            },
                            {
                                name: '预定',
                                type: 'bar',
                                data: data.data.series2
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }, "json")
            }).error(function(){console.info("eorror")});



        });
    </script>
</head>

<body>
<br />

<div id="container-11" style="width:800px; ">
    <div align="left" class="td51" style="width: 800px; padding:4px 0 4px 0; border:0;margin-left:10px;width:100%">
        <span style="font-weight: bold; font-size: 15px" th:text="#{L2002}"></span></div>
    <br />
    <form id="form1" action="" onsubmit="return false">
        <div id`="sys_form" style="background-color:#c4d8ed;margin-left:10px; width:100%">
            <span th:text="#{L2001}"></span>：
            <input id="Text1" name="from" type="text" style="width:100px" onclick="WdatePicker({dateFmt:'yyyy/MM'})" />～
            <input id="Text2" name="to" type="text" style="width:100px" onclick="WdatePicker({dateFmt:'yyyy/MM'})" />
            <input type="submit" class="btn" th:value="#{B2001}" >
        </div>`
    </form>
    <br />
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>


</body>
</html>